<template>
  <div id="pageCon" >
    <headNav :title="title"></headNav>
    <div class="topDivCss">
      <div style="width: 5.5rem; height: 0.5rem; overflow:hidden; " >
        <span>知识点：{{keyPointsName}}</span>
      </div>
      <span style="color: #999999; " >
        {{currentPage}}/{{allStrip}}
      </span>
    </div>
    <div class="inDivCss" >
      <span class="titleDivCss" >
        <div style="margin: 0rem 0.2rem;" >
          <span style="color: orange; margin-right: .2rem; " v-if="currentData.questionType == 1" >(单选题)</span>
          <span style="color: orange; margin-right: .2rem; " v-if="currentData.questionType == 2" >(多选题)</span>
          <span style="color: orange; margin-right: .2rem; " v-if="currentData.questionType == 3" >(判断题)</span>
        </div>
        <div style="margin: 0rem 0.2rem;" >
          <span class="imgCss" v-html="htmlDecode(currentData.questionContent)" ></span>
        </div>
      </span>
      <checklist :disabled="rightKeyData" :options="currentData.questionType == 3 ? commonListJudge : commonList" v-model="radioValue" :max="currentData.questionType == 2 ? 3 : 1"  ></checklist>
      <div class="buttonDivCss" v-if="!rightKeyData" >
        <button type="default" class="buttonCss" style="margin-left: -0.4rem;" @click="submitClick" >提交</button>
      </div>
      <template v-if="rightKeyData" >
      <div class="answerResultsCss" >
        <span v-if="isItCorrect" >恭喜您，答对啦</span>
        <span v-if="!isItCorrect" style="color: #ff3000; " >答错了，再接再厉</span>
      </div>
      <div class="buttonDivCss" >
        <button type="value" class="buttonCss" style="margin-left: -0.3rem;" @click="nextQuestionClick" v-if="allStrip > currentPage" >下一题</button>
      </div>
      <div class="titleAnswerCss" >
        <div class="answerCss" style="border-right: 1px solid #c9c9c9; " >
          <span>正确答案</span>
          <span style="color: #06ca8c;" v-for="(val, index) in currentData.rightOptions" :key="index" >{{optionFiltering(val)}}</span>
        </div>
        <div class="answerCss" >
          <span>我的答案</span>
          <span style="color: #ff3000;" v-for="(val, index) in radioValue" :key="index" >{{optionFiltering(val)}}</span>
        </div>
      </div>
      <div class="analysisDivCss" >
        <button type="default" class="buttonAnalysisCss" @click="viewResolutionClick" >查看解析 ∨</button>
      </div>
      <span v-if="analysisHide == true" class="spanCss" v-html="htmlDecode(currentData.questionAnalysis)" ></span>
      <span v-if="analysisHide == true" class="spanCss" v-html="htmlDecode(currentData.questionAnalysisT)" ></span>
      </template>
      <div style="width: 100%; height: 1rem; " ></div>
    </div>
    <div class="bottomDivCss" @click="viewResultsClick" v-if=" this.allStrip == this.currentPage && rightKeyData" >
      查看结果
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { Checklist  } from 'vux'
export default {
  components: {
    headNav,
    Checklist
  },
  props: {
    list: Array,  // 题目数据列表
    title: {   // 标题
      type: String,
      default: ''
    },
    keyPointsName: {  // 知识点&章节
      type: String,
      default: ''
    },
    selectSubject: {  // 学科ID
      type: String,
      default: ''
    },
    roter: {  // 来的页面地址
      type: String,
      default: ''
    }
  },
  data () {
    return {
      allStrip: 0, // 总条数
      currentPage: 1, // 当前页
      currentData: '',  // 当前展示数据
      rightKeyData: false,  // 答题完成后的隐藏和消失
      analysisHide: false,  // 控制错题解析消失出现
      isItCorrect: false,  // 判断答题是否正确
      radioValue: [],
      commonList: [
        {key:4, value:'A'},
        {key:8, value:'B'},
        {key:16, value:'C'},
        {key:32, value:'D'}
      ],
      commonListJudge: [
        {key:1, value:'正确'},
        {key:2, value:'错误'}
      ],
    }
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId
    })
  },
  mounted() {
    this.controlWhereabouts(this.roter)
    this.controlReflectText(this.keyPointsName)
    this.allStrip = this.list.length
    this.currentData = this.list[this.currentPage - 1]
    console.log(this.list)
  },
  methods: {
    ...mapActions({
       singleQuestionApi: 'wrongTopic/singleQuestionApi',
       resultApi: 'wrongTopic/resultApi'
     }),
     ...mapMutations({
       controlAllResultData: 'wrongTopic/controlAllResultData',
       controlWhereabouts: 'wrongTopic/controlWhereabouts',
       controlReflectText: 'wrongTopic/controlReflectText'
     }),
    // 查看解析按钮事件
    viewResolutionClick () {
      this.analysisHide == true ? this.analysisHide = false : this.analysisHide = true
      document.getElementById('pageCon').scroll({ top: 1000000, left: 0, behavior: 'smooth' })
      if (this.currentData.questionAnalysis == null && this.currentData.questionAnalysisT == null) {
        this.$vux.toast.text('该题暂无题目解析', 'middle')
      }
    },
    // 查看结果按钮事件
    viewResultsClick () {
      this.resultApi(this.currentData.batchId).then(res => {
        this.controlAllResultData(res)
        this.$router.push('/wrongTopic/answerResults')
      })

    },
    // 提交按钮触发事件
    submitClick () {
      if (this.radioValue.toString() == this.currentData.rightOptions.toString()) {
        this.isItCorrect = true
      } else {
        this.isItCorrect = false
      }
      let arr = []
      for (let i = 0; i < this.radioValue.length; i++) {
        arr.push(this.radioValue[i])
      }
      if (arr.length <= 0) {
        this.$vux.toast.text('请选择至少一个选项', 'middle')
      } else {
        // '2dd7fe356b594f73838655422382199f'
        // this.studentId
        let params = {
          questionId: this.currentData.id,
          subjectId: this.selectSubject,
          batchId: this.currentData.batchId,
          studentId: this.studentId,
          answerOptions: arr
        }
        this.singleQuestionApi(params).then(res => {
          this.rightKeyData = true
        })
      }
    },
    // 下一题按钮触发事件
    nextQuestionClick () {
      let num = this.currentPage
      Object.assign(this.$data, this.$options.data())
      this.currentPage = num + 1
      this.allStrip = this.list.length
      this.currentData = this.list[this.currentPage - 1]
    },
    // 题目选项过滤
    optionFiltering (e) {
      switch(e){
        case 1: return "正确"; break;
        case 2: return "错误"; break;
        case 4: return "A"; break;
        case 8: return "B"; break;
        case 16: return "C"; break;
        case 32: return "D"; break;
        case 64: return "E"; break;
        case 128: return "F"; break;
        case 256: return "G"; break;
        case 512: return "H"; break;
        case 1025: return "I"; break;
        case 2048: return "J"; break;
        case 4096: return "K"; break;
        case 8192: return "L"; break;
        case 16384: return "M"; break;
        case 32768: return "N"; break;
        case '正确': return 1; break;
        case '错误': return 2; break;
        case "A": return 4; break;
        case "B": return 8; break;
        case "C": return 16; break;
        case "D": return 32; break;
        case "E": return 64; break;
        case "F": return 128; break;
        case "G": return 256; break;
        case "H": return 512; break;
        case "I": return 1025; break;
        case "J": return 2048; break;
        case "K": return 4096; break;
        case "L": return 8192; break;
        case "M": return 16384; break;
        case "N": return 32768; break;
      }
    }
  }
}
</script>

<style scoped lang="less">
// 左右靠边，上下居中
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// 左右居中，排序从上到下
.flexIn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 左右居中，上下居中
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.topDivCss {
  width: 6.8rem;
  height: 0.88rem;
  background: #FFF;
  padding: 0 .2rem;
  font-size: 0.32rem;
  .flex;
}

.inDivCss {
  background: #FFF;
  margin-top: 0.3rem;
  padding-top: .3rem;
  font-size: 0.32rem;
  display: flex;
  flex-direction: column;
}

.titleDivCss {
  margin-bottom: .3rem;
  font-size: 0.32rem;
}

.titleAnswerCss {
  width: 6.72rem;
  height: 1.14rem;
  margin: 0.2rem 0 .3rem .05rem;
  border-radius: 0.08rem;
  background: #FFF;
  border: .6px solid #c9c9c9;
  display: flex;
  margin-left: 0.2rem;
}

.answerCss {
  width: 49.4%;
  height: 100%;
  color: #666666;
  font-size: 0.28rem;
  .flexIn;
}

.buttonDivCss {
  width: 7.2rem;
  height: 1.4rem;
  .flexCenter;
}

.buttonCss {
  width: 2.92rem;
  height: 0.72rem;
  font-size: 0.32rem;
  border: 0;
  background: #128fef;
  color: #FFF;
  border-radius: 0.5rem;
}

.buttonCss-2 {
  margin-right: .2rem;
  background: #FFF;
  color: #128fef;
  border: 1px solid #128FEF;
}

.bottomDivCss {
  width: 6.6rem;
  height: .8rem;
  background: #128fef;
  color: #FFF;
  font-size: 0.32rem;
  margin-top: 0.3rem;
  padding: 0 .3rem;
  .flexCenter;
}

.bottomImg {
  width: 0.36rem;
  height: 0.36rem;
  margin-right: .1rem;
}

.bottomDivCss-2 {
  color: #666666;
  font-size: 0.28rem;
  display: flex;
}

.analysisDivCss {
  width: 6.8rem;
  height: .7rem;
  font-size: 0.28rem;
  color: #999999;
  margin-bottom: 0.2rem;
  .flex;
}

.buttonAnalysisCss {
  width: 2.79rem;
  height: 0.58rem;
  font-size: 0.28rem;
  border-radius: 0.3rem;
  background: #e3f2fd;
  color: #128fef;
  border: 0;
}

.answerResultsCss {
  margin-top: 0.3rem;
  font-size: 0.32rem;
  color: #06ca8c;
  .flexCenter;
}

.subjectTextCss {
  border-radius: 0.8rem;
  width: .8rem;
  height: .8rem;
  text-align: center;
  line-height: .8rem;
  font-size: 0.32rem;
  color: #FFF;
  background: #04cb8a;
  margin: .1rem .2rem;
}

.whiteDivCss {
  width: 6.2rem;
  height: 2.3rem;
  margin-left: 0.2rem;
  border-radius: .2rem;
  background: #FFF;
  position: absolute;
  z-index: 101;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 0.2rem 0.3rem;
  overflow-y:scroll;
}

.summaryMaskCss {
  width: 100%;
  height: 100%;
  background: #7d7d7d;
  z-index: 100;
  opacity:0.8;
  position: absolute;
  right: 0;
  top: .8rem;
}

.summaryMaskButtonCss {
  width: 2.5rem;
  height: 0.8rem;
  background: #138ef2;
  color: #FFF;
  font-size: 0.32rem;
  position: absolute;
  left: 2.4rem;
  top: 5rem;
  z-index: 101;
  border: 0;
  border-radius: 2rem;
}

.imgCss {
  width: 98%;
}


</style>
<style>
.imgCss img {
  max-width: 100%;
}

.spanCss * {
  padding: 0 0.2rem;
  width: 100%;
}
</style>
